<template>
  <div class="movie-container">
    <!--this.$route时路由的参数对象-->
    <!--this.$router时路由的导航对象-->
    <!--<h3>Movie 组件 &#45;&#45; {{this.$route.params.id}}</h3>-->
    <h3>Movie 组件 -- {{id}}</h3>
    <button @click="showThis">打印this</button>
    <button @click="goback">go后退</button>
    <button @click="$router.back()">back后退</button>
    <button @click="$router.forward()">forward前进</button>
  </div>
</template>

<script>
export default {
  name:'Movie',
  props: ['id'],
  methods: {
    showThis() {
      console.log(this)
    },
    goback() {
      //后退
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.movie-container {
  background-color: lightskyblue;
  min-height: 200px;
  padding-left: 10px;
  h3 {
    margin: 0;
    padding-top: 10px;
  }
}
</style>
